<mat-card>
  <mat-card-header
    ><mat-card-title>Angular</mat-card-title>
    <mat-card-subtitle>Benefits of Angular</mat-card-subtitle></mat-card-header
  >
  <mat-card-content>
    <h3>Modern Web Dev</h3>
    <p>
      Angular is a complete rewrite, so disgregard anything you know from 1.x
      (AngularJS). Along with ES2015 (formerly ES6) and TypeScript, Angular
      brings many best practices and conveniences from backend languages to the
      frontend. Along with that, other key benefits:
    </p>
    <ul>
      <li>Angular CLI - standardized and powerful command line functions</li>
      <li>Intellisense - text editor IDE support</li>
      <li>Native - Build native desktop and mobile apps</li>
      <li>Animation - more powerful web animations</li>
      <li>Lazy loading - load one web component per time for optimization</li>
      <li>Performance - incredibly improved overall speed and performance</li>
    </ul>
  </mat-card-content>
  <mat-divider></mat-divider>
  <mat-card-actions>
    <a mat-button color="accent" target="_blank" href="https://angular.dev/"
      >Angular docs</a
    >
  </mat-card-actions>
</mat-card>
<mat-card>
  <mat-card-title>Recommended Text Editors</mat-card-title>
  <mat-divider></mat-divider>
  <mat-nav-list>
    <a mat-list-item href="https://code.visualstudio.com/" target="_blank">
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>Microsoft Visual Studio Code (free)</span>
    </a>
    <mat-divider></mat-divider>
    <a mat-list-item href="https://atom.io/" target="_blank">
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>Atom (free)</span>
    </a>
  </mat-nav-list>
</mat-card>
<mat-card>
  <mat-card-header
    ><mat-card-title>Angular Resources</mat-card-title></mat-card-header
  >
  <mat-nav-list>
    <a mat-list-item href="" target="_blank">
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>Angular Example App Tutorial</span>
    </a>
    <mat-divider></mat-divider>
    <a mat-list-item href="https://angular.dev/overview" target="_blank">
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>Angular Quickstart app</span>
    </a>
    <mat-divider></mat-divider>
    <a mat-list-item href="http://jilles.me/" target="_blank">
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>Angular VS AngularJS Blog</span>
    </a>
    <mat-divider></mat-divider>
    <a
      mat-list-item
      href="https://toddmotto.com/bootstrap-angular-2-hello-world"
      target="_blank"
    >
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine
        >Todd Motto Bootstrapping your first Angular application</span
      >
    </a>
    <mat-divider></mat-divider>
    <a
      mat-list-item
      href="https://johnpapa.net/es5-es2015-typescript/"
      target="_blank"
    >
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine
        >Understanding ES5, ES2015 and TypeScript by John Papa</span
      >
    </a>
    <mat-divider></mat-divider>
    <a
      mat-list-item
      href="https://www.npmjs.com/package/awesome-angular2"
      target="_blank"
    >
      <mat-icon matListItemIcon>launch</mat-icon>
      <span matListItemLine>
        Awesome list of Angular seed repos, starters, boilerplates, examples,
        tutorials, components, &amp; more!
      </span>
    </a>
  </mat-nav-list>
</mat-card>
